<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #main{
            width: 600px;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="main">11</div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'];
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
        var yDataArr1 = [70, 88, 79, 60, 89, 69, 78, 45];
        var option = {
            title: {
                text: '成绩展示',
                left:'left',
                borderColor:"blue",
                borderWidth:7,
                borderRadius:10,
                textStyle:{
                    color:'red'
                }
            },
            tooltip: {
                show: true,
                trigger: 'axis', // 触发类型，默认数据触发，可选为：'item'、'axis'
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: '{b}:{c}',
                triggerOn:'mousemove'
            },
            toolbox:{
                feature: {
                    saveAsImage: { // 保存为图片
                        title: '保存为图片'
                    },
                    dataView: { // 数据视图
                        readOnly: false,
                        title: '数据视图',
                        lang: ['数据视图', '关闭', '刷新']
                    },
                    magicType: { // 动态类型切换
                        type: ['line', 'bar', 'stack', 'tiled'],
                        title: {
                            line: '折线图',
                            bar: '柱状图',
                                stack: '堆积',
                                tiled: '平铺'
                        }
                    },
                    restore: { // 还原
                        title: '还原'
                    },
                    // 其他可用的功能，比如 dataZoom、saveAsImage 等
                }
            },
            legend: {
                // data: ['语文', '数学'],
            },
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value',
                axisTick:{
                    show:true
                },
                axisLine:{
                    show:true
                }
            },
            series: [{
                name: '语文',
                type: 'bar',
                data: yDataArr,
                color:"pink"
            },
            {
                name: '数学',
                type: 'bar',
                data: yDataArr1,
                color:"#ccc"
            }
        ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>